<template>
  <div>
    <dog
      v-for="(item, index) in List"
      :key="index"
      :imgurl="item.dogImgUrl"
      :dogname="item.dogName"
      @love="dogFn"
    />

    <p>显示喜欢的狗:</p>
    <ul>
      <li v-for="(item, index) in loveArr" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import Dog from './components/BuyDog.vue'
export default {
  data() {
    return {
      List: [
        {
          dogImgUrl:
            'http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg',
          dogName: '博美',
        },
        {
          dogImgUrl:
            'https://ts1.cn.mm.bing.net/th/id/R-C.71bd16bbef58520752275099f1dcf1f7?rik=ZeYjigvDu0pGBg&riu=http%3a%2f%2fwww.btbsm.com%2fuploads%2f2019-04-25%2f20190425203558462.jpg&ehk=bkSg%2bnYBHx2flovJib%2fGbTgSgQRfMyTP2rvj6ethIEc%3d&risl=&pid=ImgRaw&r=0',
          dogName: '泰迪',
        },
        {
          dogImgUrl:
            'https://ts1.cn.mm.bing.net/th/id/R-C.ac2a515900d48dabed5ac5fa57cde772?rik=2Nmz6A4w1HibWQ&riu=http%3a%2f%2fwww.baobeita.com%2fupload%2fimage%2fproduct%2f201404%2f10098201%2f552cc439-19f5-447d-8dae-8f2d2eb8b318-large.jpg&ehk=K0EyeTZ62oV9CiyWrrwnSh%2bJP2S9WoeAJ4GBMFcBgRY%3d&risl=&pid=ImgRaw&r=0',
          dogName: '金毛',
        },
        {
          dogImgUrl:
            'https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c',
          dogName: '哈士奇',
        },
        {
          dogImgUrl:
            'https://ts1.cn.mm.bing.net/th/id/R-C.45b95f44e7131d6a1bc79f5bc1435edc?rik=6SB%2ferDtzPKgqQ&riu=http%3a%2f%2fwww.baobeita.com%2fupload%2fimage%2fgoods%2f201303%2f100461%2fbig_06399904fee24099a29ccaaadf0f8ab8.jpg&ehk=LRVy7E%2f4qf9XLoAYHVBBLjZYDXftjQcnCdcGTFmhl9I%3d&risl=&pid=ImgRaw&r=0',
          dogName: '阿拉斯加',
        },
        {
          dogImgUrl:
            'https://ts1.cn.mm.bing.net/th/id/R-C.fa5a18c9b70412b4f390084a5edcad04?rik=oa8A3DH%2bp8JUmA&riu=http%3a%2f%2fwww.baobeita.com%2fupload%2fimage%2fproduct%2f201406%2f10104200%2f4d0a0021-d1f1-43ce-b94b-c1b556fd7e00-large.jpg&ehk=7r0rZlzXAQqLIJiE9bz9Wz1zbBsjrALYeyqfAbasGFw%3d&risl=&pid=ImgRaw&r=0',
          dogName: '萨摩耶',
        },
      ],
      loveArr:[]
    }
  },
  components: {
    Dog,
  },
  methods: {
    dogFn(dogName) {
      this.loveArr.push(dogName)
    },
  },
}
</script>

<style></style>
